<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs" :key="item.id">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="val in item.values" :key="val.name">
          <img
          :class="{selected:val.selected,disabled:val.disabled}"
            v-if="val.picture"
            :src="val.picture"
            alt=""
            :title="val.name"
            @click="ClickSpec(item,val)"
          />
          <span
           :class="{selected:val.selected,disabled:val.disabled}"
           @click="ClickSpec(item,val)"
            v-else
            >{{ val.name }}</span
          >
        </template>
      </dd>
    </dl>
  </div>
</template>
<script>
import getPowerSet from "@/vender/powerSet"
import { onMounted } from 'vue'
// import xtxInfiniteLoadingVue from '@/components/library/xtx-infinite-loading.vue'
// 字典对象
// 最终目的是要得到skus里面的specs里面的valName
const getPathMap = (skus) => {
    const pathMap = {}//得到的数据为了初始化与点击时  有库存的数据放进去
    skus.forEach(sku=>{
        if(sku.inventory > 0) {
            const valueArr = sku.specs.map(spec => spec.valueName)
            const powerSet = getPowerSet(valueArr)//得到数组子集
            powerSet.forEach(set=>{
                // 数组转换为字符串放到字典对象里面
                const key = set.join(',') 
                // 如果是'蓝色':100这种形式，就是有id,给追加即：'蓝色':[100,101]
                if(pathMap[key]){
                    pathMap[key].push(sku.id)
                }else{
                    // 创建一个数组  '红色':[100]
                    pathMap[key] = [sku.id]
                }
            })
        }
    })
    // console.log(pathMap)
    return pathMap
}
// 选中的数组
const getSelectedArr = (specs) =>{
    const selectedArr = []
    // 选中的放进去
    specs.forEach(spec => {
        const selectedVal = spec.values.find(val => val.selected)
        selectedArr.push(selectedVal ? selectedVal.name : undefined)
     })  
    return selectedArr
}
// 更新禁用按钮
const updateDisabledStatus = (specs,pathMap) => {
    // 目的：specs里面的values里面的每一个按钮与是否存在于字典对象中，不存在就禁用
    specs.forEach((spec,i)=>{
        const selectedArr = getSelectedArr(specs)
        spec.values.forEach(val=>{
            if(val.selected) return 
            selectedArr[i] = val.name
            // 过滤undefined
            const key = selectedArr.filter(value => value).join(',')
            // 禁用
            // console.log(key);
            val.disabled = !pathMap[key]
        })
    })
}
// 初始化得到默认选中规格值的信息
// const initData = (goods,skuId) => {
// // 让在skus里面存在的stuId与specs里面的规格值的id进行判断，有就显示
// const sku = goods.skus.find(sku => sku.id === skuId)
// // console.log(sku)
// goods.specs.forEach((item,i)=>{
//     const val = item.values.find(val => val.name === sku.specs[i].valueName)
//     val.selected = true
// })
// }

// 初始化规格值
// const initData = (goods,skuId) => {
// const sku = goods.skus.find(sku => sku.id === skuId  )
// goods.specs.forEach((item,i)=>{
// let val = item.values.find(val => val.name === sku.specs[i].valueName)
// val.selected = true
// }) 
// }
export default {
  name: "GoodsSku",
  props: {
    goods: {
      type: Object,
    },    
    skuId:{
        type:String
    } 
  },
  setup(props,{emit}) {
    const pathMap = getPathMap(props.goods.skus)
    onMounted(()=>{
      // console.log(props.goods,'goods')
    })
    // 初始化获取点击规格值信息
    // initData(props.goods,props.skuId)
    // 初始化
    updateDisabledStatus(props.goods.specs,pathMap)
    const ClickSpec = (item,val) => {
        if(val.disabled) return
        if(val.selected){
            val.selected = false
        }else{
            // 排他思想
            item.values.forEach(bv => bv.selected = false)
            val.selected = true
        }
        updateDisabledStatus(props.goods.specs,pathMap)
        // 点击时得到可选数组的id，找对应的sku，得到需要数据
        const selectedArr = getSelectedArr(props.goods.specs).filter(v => v)
        // console.log(selectedArr)
        if(selectedArr.length === props.goods.specs.length){
            // 完整
            const select = pathMap[selectedArr.join(',')]
            // console.log(select)
            const sku = props.goods.skus.find(val => val.id === select[0])
            // console.log(sku)
            // console.log(sku.specs.reduce((p,c)=>`${p} ${c.name}:${c.valueName}`,''));
            emit('change',{
                skuId:sku.id,
                price:sku.price,
                oldPrice:sku.oldPrice,
                inventory:sku.inventory,
                // 给购物车   [属性名：属性值,属性名：属性值...]之和
                specText:sku.specs.reduce((p,c)=>`${p} ${c.name}:${c.valueName}`,'').replace('','')
            })
        }else{
            // 不完整
            emit('change',{})
            
        }
   
        
        
  }
return {ClickSpec}
}

  }
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        margin: 0 10px 5px 0;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
